<template>
  <div class="user-center-edit">
    <div class="user-center-edit-avatar">
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8880/web/user/uploadAvatar"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <el-avatar :size="120" :src="userInfo.avatar" />
      </el-upload>
    </div>
    <div class="user-center-edit-username">
      <div class="user-center-edit-username-text">
        <el-text> 用户名 :</el-text>
      </div>

      <el-input v-model="userInfo.username" style="width: 300px" />
    </div>
    <div class="user-center-edit-sex">
      <div class="user-center-edit-sex-text">
        <el-text> 性别 :</el-text>
      </div>

      <el-radio-group v-model="userInfo.sex">
        <el-radio :value="1">男</el-radio>
        <el-radio :value="2">女</el-radio>
      </el-radio-group>
    </div>
    <div class="user-center-edit-age">
      <div class="user-center-edit-age-text">
        <el-text> 年龄 :</el-text>
      </div>
      <el-input v-model="userInfo.age" style="width: 300px" />
    </div>
    <div class="user-center-edit-design">
      <div class="user-center-edit-design-text">
        <el-text> 个人签名 :</el-text>
      </div>
      <el-input
        v-model="userInfo.design"
        style="width: 300px"
        autosize
        type="textarea"
      />
    </div>
    <div class="user-center-edit-button">
      <el-button round @click="cancer">取消</el-button>
      <el-button type="primary" round @click="submitUpload">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo } from "@/api/userCenter";
import router from "@/router";
import { getInfo } from "@/utils/storage";
import { ElMessage } from "element-plus";
export default {
  name: "UserCenterEditView",
  data() {
    return {
      userInfo: {},
      headers: {
        "Access-Token": getInfo().token,
      },
    };
  },
  methods: {
    // 取消编辑
    cancer() {
      router.go(-1);
    },
    // 加载用户信息
    async load() {
      const res = await getUserInfo(this.$store.state.user.userInfo.userId);
      if (res.data.success) {
        this.userInfo = res.data.result;
      }
    },

    handleAvatarSuccess(response) {
      console.log("handleAvatarSuccess");
      console.log(response);
      if (response.success) {
        this.userInfo.avatar = response.result;
      }
    },
    beforeAvatarUpload(rawFile) {
      console.log("beforeAvatarUpload");
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("Avatar picture must be JPG format!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error("Avatar picture size can not exceed 10MB!");
        return false;
      }
      return true;
    },
    // 提交编辑
    async submitUpload() {
      const res = await updateUserInfo(this.userInfo);
      if (res.data.success) {
        ElMessage.success("修改成功");
        this.$router.push("/home/userCenter/"+this.$store.state.user.userInfo.userId+"/myComments");
      }
    },
  },
  created() {
    this.load();
  },
};
</script>

<style>
.user-center-edit {
  display: grid;
}
.user-center-edit-avatar {
  display: flex;
  justify-content: center;
  margin: 50px 100px 20px 100px;
}
.user-center-edit-username {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 100px 10px 100px;
}
.user-center-edit-design {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 100px 10px 100px;
  position: relative;
  right: 0.3%;
}
.user-center-edit-age {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 100px 10px 100px;
  position: relative;
  right: -0.5%;
}
.user-center-edit-sex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 100px 10px 100px;
  position: relative;
  right: 5%;
}
.user-center-edit-username-text {
  position: relative;
  right: 1%;
}
.user-center-edit-sex-text {
  position: relative;
  right: 2%;
}
.user-center-edit-age-text {
  position: relative;
  right: 1%;
}
.user-center-edit-design-text {
  position: relative;
  right: 1%;
}
.user-center-edit-button {
  display: flex;
  justify-content: center;
}
</style>